import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

import '../constants.dart' show AppColors, Constants, AppStyles;

class KunPengPage extends StatefulWidget {
  @override
  _KunPengPageState createState() => _KunPengPageState();
}

class _KunPengPageState extends State<KunPengPage> {
  @override
  Widget build(BuildContext context) {
    // 天气显示模块
    Widget weather = Container(
      width: 120.0,
      height: 170.0,
      padding: EdgeInsets.fromLTRB(10, 15, 10, 10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5.0),
        color: Colors.white,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Icon(
                IconData(0xe606, fontFamily: Constants.IconFontFamily),
                size: 40.0,
                color: Color(AppColors.KunPengThemeColor),
              ),
              Column(
                children: [
                  Text(
                    '20~27℃',
                    style: TextStyle(
                        color: Color(AppColors.KunPengWeatherTextColor)),
                  ),
                  Container(
                    height: 10.0,
                  ),
                  Text(
                    '多云',
                    style: TextStyle(
                      color: Color(AppColors.KunPengWeatherTextColor),
                      fontSize: 18.0,
                    ),
                  ),
                ],
              ),
            ],
          ),
          Container(
            child: Text(
              '10:08',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 32.0,
              ),
            ),
          ),
          Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('11月5日', style: AppStyles.KunPengDateTextStyle),
                  Text('星期四', style: AppStyles.KunPengDateTextStyle),
                ],
              ),
              Container(
                height: 5.0,
              ),
              Text(
                '农历庚子年九月二十',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 11.0,
                ),
              ),
            ],
          ),
        ],
      ),
    );

    // 头部页面
    Widget header = Container(
      color: Color(AppColors.KunPengThemeColor),
      alignment: Alignment.centerLeft,
      height: 200.0,
      margin: EdgeInsets.only(bottom: 10.0),
      padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Container(
                  child: Text(
                    '上线通知',
                    style: TextStyle(
                      fontSize: 28.0,
                      color: Colors.white,
                    ),
                  ),
                  alignment: Alignment.topLeft,
                ),
                Container(
                  height: 10.0,
                ),
                Expanded(
                  child: Container(
                    child: new Text(
                      '       尊敬的翼逍遥社区全体业主：即日起小区启用智慧屏缴费系统，可扫描对应房号下的二维码缴纳物业费，公众号绑定业主身份可查询缴费明细！78974546记录卡',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 12.0,
                        letterSpacing: 1,
                        fontWeight: FontWeight.w500,
                        height: 1.2,
                      ),
                      maxLines: 6,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ),
                Container(
                  alignment: Alignment.bottomLeft,
                  child: FlatButton(
                    onPressed: () {
                      print('被点击了');
                    },
                    child: Text(
                      '查看更多',
                      style: TextStyle(
                        fontSize: 12.0,
                      ),
                    ),
                    color: Colors.white,
                    textColor: Color(AppColors.KunPengThemeColor),
                    padding: EdgeInsets.all(5.0),
                  ),
                ),
              ],
            ),
          ),
          Container(
            width: 10.0,
          ),
          weather,
        ],
      ),
    );

    // 鲲鹏默认按钮组件
    Widget KunPengBtn = Container(
      width: 80.0,
      height: 20.0,
      margin: EdgeInsets.fromLTRB(0, 5.0, 0, 5.0),
      decoration: BoxDecoration(
        color: Color(AppColors.KunPengDefaultBtnGgColor),
        borderRadius: BorderRadius.circular(20.0),
      ),
      child: Center(
        child: Text(
          '1栋',
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
            fontSize: 12.0,
          ),
        ),
      ),
    );

    // 鲲鹏对应表格显示层数
    Widget KunPengNum = Container(
      width: 20.0,
      height: 20.0,
      child: Text(
        '1层',
        style: TextStyle(
          color: Color(AppColors.KunPengNumColor),
          fontSize: 10.0,
        ),
        // textAlign: TextAlign.center,
      ),
    );

    Widget KunPengGridItem = Container(
      width: 60.0,
      height: 15.0,
      decoration: BoxDecoration(
        color: Color.fromRGBO(255, 255, 255, 1),
        borderRadius: BorderRadius.circular(3.0),
      ),
      margin: EdgeInsets.all(1.0),
    );

    // 鲲鹏对应表格视图
    Widget KunPengGridTable = Container(
      // width: MediaQuery.of(context).size.width - 50,
      color: Color(AppColors.KunPengGridGgColor),
      child: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount:
              (MediaQuery.of(context).size.width) ~/ 60.0, //横轴三个子widget
          childAspectRatio: 2.0, //宽高比为1时，子widget
        ),
        children: <Widget>[
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
          KunPengGridItem,
        ],
      ),
    );

    // 中间模块页面
    Widget section = Expanded(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20.0),
        ),
        width: MediaQuery.of(context).size.width - 20,
        child: Column(
          children: [
            Container(
              height: 100.0,
              margin: EdgeInsets.only(bottom: 10.0),
              decoration: BoxDecoration(
                color: Color(AppColors.KunPengPrimaryBgColor),
                borderRadius: BorderRadius.vertical(
                  top: Radius.circular(20),
                ),
              ),
              child: Row(
                children: [
                  Container(
                    width: 100,
                    decoration: BoxDecoration(
                      color: Color(AppColors.KunPengPrimaryBgColor),
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(20.0),
                      ),
                    ),
                    child: Container(
                      width: 100,
                      decoration: BoxDecoration(
                        color: Color(AppColors.KunPengPrimarayColor),
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(20.0),
                          bottomRight: Radius.circular(20.0),
                        ),
                      ),
                    ),
                  ),
                  Container(
                    width: MediaQuery.of(context).size.width - 120,
                    decoration: BoxDecoration(
                      color: Color(AppColors.KunPengPrimarayColor),
                      borderRadius: BorderRadius.only(
                        topRight: Radius.circular(20.0),
                      ),
                    ),
                    child: Container(
                      width: MediaQuery.of(context).size.width - 120,
                      decoration: BoxDecoration(
                        color: Color(AppColors.KunPengPrimaryBgColor),
                        borderRadius: BorderRadius.vertical(
                          top: Radius.circular(20.0),
                        ),
                      ),
                    ),
                  ),
                ],
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
              ),
            ),
            Expanded(
              child: Container(
                width: MediaQuery.of(context).size.width - 30,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                        width: 80.0,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            Expanded(
                              child: ListView(
                                children: <Widget>[
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                  KunPengBtn,
                                ],
                                scrollDirection: Axis.vertical, //滑动方向--纵向
                                reverse: false, //由下网上滚动
                              ),
                            ),
                          ],
                        )),
                    Container(
                        width: MediaQuery.of(context).size.width - 110,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            Container(
                              width: 20.0,
                              margin: EdgeInsets.fromLTRB(0, 4.0, 0, 4.0),
                              child: ListView(
                                children: <Widget>[
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                  KunPengNum,
                                ],
                                scrollDirection: Axis.vertical, //滑动方向--纵向
                                reverse: false, //由下网上滚动
                              ),
                            ),
                            Expanded(
                              // flex: 1,
                              child: KunPengGridTable,
                            ),
                          ],
                        )),
                  ],
                ),
              ),
            ),
            Center(
                child: Container(
              width: 100.0,
              margin: EdgeInsets.fromLTRB(0, 5.0, 0, 5.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 20.0,
                    height: 20.0,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10.0),
                      border: Border.all(
                          width: 1,
                          color: Color(AppColors.KunPengThemeColor),
                          style: BorderStyle.solid),
                      color: Color(AppColors.KunPengThemeColor),
                    ),
                    child: Center(
                        child: Text(
                      '1',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    )),
                  ),
                  Container(
                    width: 20.0,
                    height: 20.0,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10.0),
                        border: Border.all(
                            width: 1,
                            color: Color(AppColors.KunPengThemeColor),
                            style: BorderStyle.solid)),
                    child: Center(
                        child: Text(
                      '2',
                      style: TextStyle(
                        color: Color(AppColors.KunPengThemeColor),
                        fontWeight: FontWeight.bold,
                      ),
                    )),
                  ),
                  Container(
                    width: 20.0,
                    height: 20.0,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10.0),
                        border: Border.all(
                            width: 1,
                            color: Color(AppColors.KunPengThemeColor),
                            style: BorderStyle.solid)),
                    child: Center(
                        child: Text(
                      '3',
                      style: TextStyle(
                        color: Color(AppColors.KunPengThemeColor),
                        fontWeight: FontWeight.bold,
                      ),
                    )),
                  )
                ],
              ),
            )),
          ],
        ),
      ),
    );

    // 底部页面
    Widget footer;
    // 当前鲲鹏显示平台为app时，隐藏底部
    bool isApp = true;
    if (isApp) {
      footer = Container(
        margin: EdgeInsets.only(top: 10.0),
      );
    } else {
      footer = Container(
        height: 100.0,
        color: Color(AppColors.KunPengThemeColor),
      );
    }

    return Container(
      color: Color(AppColors.KunPnegThemeBgColor),
      child: Column(
        children: [
          header,
          section,
          footer,
        ],
      ),
    );
  }
}
